<template>
  <el-card shadow="never" class="hotArticle-card">
    <el-row >
      <!--        hotArticle-->
      <el-col :span="24">
        <el-card shadow="never" style="border: none">
          <div slot="header" >
            <!--    页头-->
            <PageHeader :title="this.$route.meta.title" ></PageHeader>
            <!--              分类nav-->
            <span style="font-size: 20px;font-family: fzBlack;letter-spacing: 1px;font-weight: bolder;">
                  <i class="el-icon-s-management"></i> 全部收藏
                 </span>
          </div>

          <!--            文章列表-->
          <el-row v-for="item in articleList" :key="item.id">
            <el-col :span="24">
              <p class="article-title" @click="handleDetail(item.id)">{{item.title}}</p>
              <p style="margin-top: 10px;font-size: 15px;color: gray;">
                <i  class=" el-icon-notebook-1" ></i>
                {{item.categoryName}}

                <i style="margin-left: 20px;" class=" el-icon-time" ></i>
                <span style="margin-left: 10px;">{{item.createTime}}</span>
              </p>
              <!--文章概要-->
              <el-row style="margin-top:10px;">
                <el-col :span="6">
                  <el-image style="width: 200px" :src="item.thumbnail"></el-image>
                </el-col>
                <el-col :span="18" style="font-family:fzBlack; font-size:15px;letter-spacing: 1px;line-height: 25px;color:gray;">
                  {{item.summary}}
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </el-col>
          </el-row>

          <el-pagination
              style="text-align: center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pageNum"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import PageHeader from "@/components/pageHeader";
import {reqArticle} from "@/API";

export default {
  name: 'articleList',
  components:{
    PageHeader
  },
  model:{
    event: 'test'
  },
  data(){
    return{
      //文章列表对象
      articleList:[
        {
          categoryName:'',
          id:0,
          likeCount:0,
          summary:'',
          thumbnail:'',
          title:'',
          viewCount:'',
          createTime:''
        }
      ],
      total:0,
    //  分页数据
      pageNum:1,
      pageSize:5,
    }
  },
  created() {
    this.init()
    //清除搜索信息
    if(localStorage.getItem("pole_article_search")!=null){
      localStorage.removeItem("pole_article_search")
    }
  },
  methods:{
    searchInit(data){
      console.log(data)

    },
    //跳转文章详情
    handleDetail(id){
      //写入local storage articleId
      localStorage.setItem("articleId",id)
      this.$router.push({
        path:"/articleDetail"
      })

    },
    //分页条件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.init()
    },
    //初始化页面
    init(){

        //没有，则初始化查询
        let params = {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          name:localStorage.getItem("pole_article_search")
        }
        reqArticle(params).then((res)=>{
          if(res.status === 200){
            localStorage.setItem("article-list",JSON.stringify(res.data))
            this.articleList =  res.data.rows
            this.total = parseInt(res.data.total)

          }else{
            this.$message.warning("网络不稳定，请稍后重试！")
            console.log(res)
          }
        })
      }
      // let data = JSON.parse(localStorage.getItem("article-list"))
      // this.articleList =  data.rows
      // this.total = parseInt(data.total)

    }

}
</script>

<style scoped>
/*font*/
@font-face {
  font-family: 'handWrite';
  src: url("@/assets/font/handWrite.ttf");
}
@font-face {
  font-family: 'fzBlack';
  src: url("@/assets/font/fzBlack.ttf");
}
.hotArticle-card{
  margin:10px auto;
  width:80%;
}

.article-title{
  color:black;
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 1px;
}
.article-title:hover{
  cursor: pointer;
  color:#1bb6e2;
}
</style>
